<template>
  <CommonPanel title="实时影像">
    <template #content>
      <div class="live-video">
        <video-player
          :poster="poster"
          crossorigin="anonymous"
          :controls="true"
          :loop="true"
          :volume="0.6"
          :techOrder="['html5', 'flvjs']"
          autoplay="false"
          @mounted="handleMounted"
        /></div></template
  ></CommonPanel>
</template>

<script setup>
import { VideoPlayer } from '@videojs-player/vue';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import { ref } from 'vue';
import CommonPanel from '../panel/CommonPanel.vue';

const props = defineProps({
  src: {
    type: String,
    // default: 'http://v2h.jdshipin.com/asia_action/asia_action.stream/chunklist.m3u8',
    // default: '/src/assets/成语接龙.mp4',
  },
  videoType: {
    type: String,
    default: 'hls',
  },
});
const poster = ref('/src/assets/subway.jpeg');

const handleMounted = ({ player }) => {
  if (props.videoType === 'hls') {
    // console.log('HLS Live player mounted', player);
    player.src(props.src);
  } else if (props.videoType === 'flv') {
    // flv.js runs only in the browser environment and does an asynchronous processing for SSR prerender.
    import('/src/cesiumTools/flvjs-tech.js').then(({ FlvJsTech }) => {
      console.log(FlvJsTech);
      videojs.registerTech('Flvjs', FlvJsTech);
      player.src(props.src);
    });
  }
};
</script>
<style scoped lang="scss">
.live-video {
  width: 500px;
  height: 300px;
}
:deep(.video-js.v-video-player) {
  width: 100% !important;
  height: 100% !important;
}
:deep(.vjs-text-track-display) {
  width: 80% !important;
  height: 80% !important;
}
:deep(.vjs-control-bar) {
  display: none !important;
}
</style>
